<template>
  <div class="statGraph">
    <div class="graph">
      <div class="title">代理商7天出货统计（最近7日）</div>
      <div class="graph_content">
        <div id="graph1" style="width: 100%;height: 400px;"></div>
      </div>
    </div>
    <div class="graph">
      <div class="title">公众号订单统计（最近7日）</div>
      <div class="graph_content">
        <div id="graph2" style="width: 100%;height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props:{
    info:Object
  },
  data(){
    return{
      option1:{
        legend:{
          right:'9%',
          icon:'circle'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          axisLine:{
            lineStyle:{
              color:"#E9EFF3"
            }
          },
          axisLabel:{
            color:'#8D9EAE'
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            color:'#8D9EAE',
            margin:30
          },
          axisLine:{
            lineStyle:{
              color:"#E9EFF3"
            }
          }
        },
        series: []
      },
      option2:{
        tooltip: {
          trigger: 'axis'
        },
        legend:{
          right:'9%',
          icon:'rect',
          itemHeight: 3,
          itemWidth:12,
        },
        xAxis: {
          type: 'category',
          boundaryGap:false,
          axisTick: { show: false },
          axisLine:{
            lineStyle:{
              color:"#E9EFF3"
            }
          },
          axisLabel:{
            color:'#8D9EAE'
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            color:'#8D9EAE',
            margin:30
          },
          axisLine:{
            lineStyle:{
              color:"#E9EFF3"
            }
          }
        },
        series: []
      },
      dateList:[]
    }
  },
  created(){
    this.getLatestDate()
  },
  watch:{
    info:{
      handler(val){
        this.setAgent(val)
        this.setOrder(val)
      },
      deep:true
    }
  },
  methods:{
    setAgent(val){
      let agentInfoList = this.formattingData(val.agentInfoList,'agentName')
        for(var i = 0;i < agentInfoList.length;i++){
          let data = []
          let agentList = agentInfoList[i].list
          
          for(var j = 0;j < this.dateList.length;j++){
            let index = agentList.map(e=>moment(e.createdTime).format('MM/DD')).indexOf(this.dateList[j])
            if(index > -1 && agentList[index].extraInfo){
              data.push(agentList[index].extraInfo)
            }else{
              data.push(0)
            }
          }
          
          this.option1.series.push({
            name:agentInfoList[i].agentName,
            type: 'bar',
            data: data
          })
        }
        this.init1()
    },
    setOrder(val){
      let payInfoList = this.formattingData(val.payInfoList,'payMethod')
      for(var i = 0;i < payInfoList.length;i++){
        let data = []
        let orderList = payInfoList[i].list
        for(var j = 0;j < this.dateList.length;j++){
            let index = orderList.map(e=>moment(e.createdTime).format('MM/DD')).indexOf(this.dateList[j])
            if(index > -1 && orderList[index].payAmount){
              data.push(orderList[index].payAmount)
            }else{
              data.push(0)
            }
          }
        this.option2.series.push({
            name:payInfoList[i].payMethod == '0' ? '充值' : '加注金额',
            type: 'line',
            smooth: true,
            showSymbol: false,
            itemStyle:{
              color:payInfoList[i].payMethod == '0' ? '#31D4B7' : '#599AF2'
            },
            data: data,
          })
      }
      this.init2()
    },
    //根据字段分类 arr原数组 group_key字段名
    formattingData(arr, group_key){ 
        let map = {}
        let res = []

        for (let i = 0; i < arr.length; i++) {
            let ai = arr[i]
            if (!map[ai[group_key]]) {
                map[ai[group_key]] = [ai]
            } else {    
                map[ai[group_key]].push(ai)
            }
        }
        Object.keys(map).forEach(key => {
            res.push({
                [group_key]: key,
                list: map[key],
            })
        })

        return res
    },
    getLatestDate(){
      for(var i = 0;i < 7;i++){
        let day = moment().subtract(i,'days').format('MM/DD')
        this.dateList.unshift(day)
      }
      this.option1.xAxis.data = this.dateList
      this.option2.xAxis.data = this.dateList
      console.log(this.dateList)
    },
    init1(){
      let chart = this.$echarts.init(document.getElementById('graph1'))
      chart.setOption(this.option1)
    },
    init2(){
      let chart = this.$echarts.init(document.getElementById('graph2'))
      chart.setOption(this.option2)
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../utils/common.scss';
.statGraph{
  padding-top: 24px;
  padding-bottom:24px;
  display: flex;
  justify-content: space-between;
  .graph{
    width: 49%;
  }
  .graph_content{
    background-color: #fff;
    height: 400px;
    margin-top: 17px;
    padding-top: 20px;
  }
}
</style>